<template>
  <!-- 绩效考核 -->

  <div class="Performance">
    <!-- 顶部标题栏组件 -->
    <top-header :leftArrow="leftArrow"></top-header>
    <!-- 中间内容 -->
    <div class="content">
      <van-cell v-if="!power" is-link title="新建绩效考核" @click="click1" />
      <van-cell v-if="!power" is-link title="已提交绩效考核" @click="click2" />
      <van-cell v-if="power" is-link title="待审批绩效考核" @click="click3" />
      <van-cell is-link title="已通过绩效考核" @click="click4" />
    </div>
  </div>
</template>

<script>
import { TopHeader } from '@/components'
export default {
  name: 'Performance',
  components: {
    TopHeader
  },
  data () {
    return {
      leftArrow: true, // 顶部标题栏组件是否有返回按钮
      power: sessionStorage.getItem('power') // 用户权限
    }
  },
  methods: {
    click1 () {
      this.$router.push({ path: '/PerformanceAppraisal' })
    },
    click2 () {
      this.$router.push({ path: '/PerformanceTask' })
    },
    click3 () {
      this.$router.push({ path: '/PerformanceApprove' })
    },
    click4 () {
      this.$router.push({ path: '/PerformancePass' })
    }
  }
}
</script>

<style lang="less" scoped>
.Performance {
  height: 100%;
  width: 100%;
  .content {
    box-shadow: 0 3px 4px 2px rgb(240, 240, 240);
  }
}
</style>
